<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fregments :: head(~{::title})">
    <meta charset="UTF-8">
    <!--移动端更好的适应-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情</title>
    <link rel="stylesheet" href="../static/dist/semantic/semantic.min.css" th:href="@{/dist/semantic/semantic.min.css}">
    <link rel="stylesheet" href="../static/css/my.css" th:href="@{/css/my.css}">
    <link rel="stylesheet" href="../static/css/typo.css" th:href="@{/css/typo.css}">
    <link rel="stylesheet" href="../static/css/animate.css" th:href="@{/css/animate.css}">
    <link rel="stylesheet" href="../static/lib/prism/prism.css" th:href="@{/lib/prism/prism.css}">
    <link rel="stylesheet" href="../static/lib/tocbot/tocbot.css" th:href="@{/lib/tocbot/tocbot.css}">
</head>
<body>
<!--    导航-->
<nav th:replace="_fregments :: menu(1)" class="ui segment inverted attached m-padded-mini m-shadow-small">
    <div class="ui container">
        <div class="ui inverted secondary stackable menu">
            <h2 class="ui teal header item">ZBlog</h2>
            <a href="#" class="m-item item m-mobile-hide active"><i class="home icon"></i>首页</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="idea icon"></i>分类</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="tags icon"></i>标签</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="clone icon"></i>归档</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="info icon"></i>关于我</a>
            <div class="m-item right item m-mobile-hide">
                <div class="ui inverted transparent icon input">
                    <input type="text" placeholder="搜索...">
                    <i class="search icon link"></i>
                </div>
            </div>
        </div>
    </div>
    <a href="#" class="ui m-menu m-toggle black icon button m-right-top m-mobile-show">
        <i class="sidebar icon"></i>
    </a>
</nav>

<!--    中间内容-->
<div id="way-point" class="animated bounceInLeft">
    <div class="m-container-small m-padded-big">
        <div class="ui container">
            <!--            头部-->
            <div class="ui top attached segment">
                <div class="ui horizontal link list mini">
                    <div class="item">
                        <img src="../static/images/me.jpg" class="ui avatar image" alt=""
                             th:src="@{${blog.user.avatar}}">
                        <div class="content">
                            <a href="#" class="header" th:text="${blog.user.nickname}">dylan</a>
                        </div>
                    </div>
                    <div class="item">
                        <i class="calendar icon"></i> <span th:text="${#dates.format(blog.updateTime, 'yyyy-MM-dd')}">2023-4-14</span>
                    </div>
                    <div class="item">
                        <i class="eye icon"></i><span th:text="${blog.viewCnt}">100</span>
                    </div>
                </div>
            </div>
            <!--            图片区域-->
            <div class="ui attached segment">
                <img src="../static/images/test1.jpg" class="ui fluid rounded image" th:src="@{${blog.firstPicture}}">
            </div>
            <!--            内容-->
            <div class="ui attached segment padded typo">
                <div class="ui right aligned basic segment">
                    <div class="ui orange basic label" th:text="${blog.flag}">原创</div>
                </div>
                <h2 class="ui header center aligned">用户故事</h2>
                <!--内容-->
                <div id="content" class="m-padded-left-right-responsive m-padded-large js-toc-content"
                     th:utext="${blog.content}">
                    <h1 id="selection1">Typo.css</h1>

                    <h2 id="s1-2">
                        Test
                    </h2>
                    <pre><code class="language-css">p { color: red }</code></pre>

                    <p><i class="serif">Typo.css</i> 的目的是，在一致化浏览器排版效果的同时，构建最适合中文阅读的网页排版。
                    </p>
                    <h4>现状和如何去做：</h4>
                    <pre><code class="language-css">public class Main{
    public static void main(String[] args){
        System.out.println("Hello World!");
    }
}</code></pre>
                    <h2 id="table">表格</h2>
                    <table class="ui table" summary="Typo.css 的测试平台列表">
                        <thead>
                        <tr>
                            <th>OS/浏览器</th>
                            <th>Firefox</th>
                            <th>Chrome</th>
                            <th>Safari</th>
                            <th>Opera</th>
                            <th>IE9</th>
                            <th>IE8</th>
                            <th>IE7</th>
                            <th>IE6</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>OS X</td>
                            <td>✔</td>
                            <td>✔</td>
                            <td>✔</td>
                            <td>✔</td>
                            <td>-</td>
                            <td>-</td>
                            <td>-</td>
                            <td>-</td>
                        </tr>
                        <tr>
                            <td>Win 7</td>
                            <td>✔</td>
                            <td>✔</td>
                            <td>✔</td>
                            <td>✔</td>
                            <td>✔</td>
                            <td>✔</td>
                            <td>✔</td>
                            <td>-</td>
                        </tr>
                        <tr>
                            <td>Win XP</td>
                            <td>✔</td>
                            <td>✔</td>
                            <td>✔</td>
                            <td>✔</td>
                            <td>-</td>
                            <td>✔</td>
                            <td>✔</td>
                            <td>✔</td>
                        </tr>
                        <tr>
                            <td>Ubuntu</td>
                            <td>✔</td>
                            <td>✔</td>
                            <td>-</td>
                            <td>✔</td>
                            <td>-</td>
                            <td>-</td>
                            <td>-</td>
                            <td>-</td>
                        </tr>
                        </tbody>
                    </table>

                    <h4>中文排版的重点和难点</h4>

                    <p>在中文排版中，HTML4 的很多标准在语义在都有照顾到。但从视觉效果上，却很难利用单独的 CSS
                        来实现，像<abbr title="在文字下多加一个点">着重号</abbr>（例：这里<em class="typo-em">强调一下</em>）。在
                        HTML4 中，专名号标签（<code>&lt;u&gt;</code>）已经被放弃，而
                        HTML5 被<a href="http://html5doctor.com/u-element/">重新提起</a>。<i class="serif">Typo.css</i>
                        也根据实际情况提供相应的方案。我们重要要注意的两点是：</p>
                    <ol>
                        <li>语义：语义对应的用法和样式是否与中文排版一致</li>
                        <li>表现：在各浏览器中的字体、大小和缩放是否如排版预期</li>
                    </ol>
                    <p>对于这些，<i class="serif">Typo.css</i> 排版项目的中文偏重注意点，都添加在附录中，详见：</p>
                    <blockquote>
                        <b>附录一</b>：<a href="#appendix1"><i class="serif">Typo.css</i> 排版偏重点</a>
                    </blockquote>
                    <h2 id="instance1">二、排版实例：</h2>


                    <p>目前已有像百姓网等全面使用 <i class="serif">Typo.css</i> 的项目，测试平台的覆盖，特别是在<abbr
                            title="手机、平板电脑等移动平台">移动端</abbr>上还没有覆盖完主流平台，希望有能力的同学能加入测试行列，或者加入到
                        <i class="serif">Typo.css</i>
                        的开发。加入方法：<a href="https://github.com/sofish/Typo.css">参与 <i class="serif">Typo.css</i>
                            开发</a>。如有批评、建议和意见，也随时欢迎给在 Github 直接提 <a
                                href="https://github.com/sofish/Typo.css/issues">issues</a>，或给<abbr
                                title="Sofish Lin, author of Typo.css"
                                role="author">我</abbr>发<a
                                href="mailto:sofish@icloud.com">邮件</a>。</p>


                    <h1 id="instance2">二、排版实例：</h1>

                    <p>提供2个排版实例，第一个中文实例来自于来自于<cite class="typo-unique">张燕婴</cite>的《论语》，由于古文排版涉及到的元素比较多，所以采用《论语》中《学而》的第一篇作为排版实例介绍；第2个来自到经典的
                        Lorem Ipsum，并加入了一些代码和列表等比较具有代表性的排版元素。</p>

                    <h2 id="section2-1">例1：论语学而篇第一</h2>

                    <p>
                        <small><b>作者：</b><abbr title="名丘，字仲尼">孔子</abbr>（
                            <time>前551年9月28日－前479年4月11日</time>
                            ）
                        </small>
                    </p>

                    <h4>本篇引语</h4>

                </div>
                <!--标签-->
                <div class="m-padded-left-right">
                    <span th:each="tag : ${blog.tags}" class="ui basic teal left pointing label" th:text="${tag.name}">方法论</span>
                </div>
                <!--赞赏-->
                <div class="ui center aligned basic segment" th:if="${blog.appreciation}">
                    <button id="payBtn" class="ui orange basic circular button">赞赏</button>
                </div>
                <div class="ui payQ flowing popup transition hidden">
                    <div class="ui orange basic label">
                        <div class="ui images" style="font-size: inherit !important;">
                            <div class="image">
                                <img src="../static/images/zhifubao.jpg" th:src="@{/images/zhifubao.jpg}" alt=""
                                     class="ui rounded bordered image" style="width: 120px">
                                <div>支付宝</div>
                            </div>
                            <div class="image">
                                <img src="../static/images/weixin.jpg" th:src="@{/images/weixin.jpg}" alt=""
                                     class="ui rounded bordered image" style="width: 120px">
                                <div>微信</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--            博客信息-->
            <div class="ui attached positive message" th:if="${blog.shareStatement}">
                <div class="ui grid middle aligned">
                    <div class="seven wide column">
                        <ui class="list">
                            <li>作者：<span th:text="${blog.user.nickname}">dylan</span> <a href="#" th:href="@{/about}"
                                                                                           target="_blank">(联系作者)</a>
                            </li>
                            <li>发表时间：<span
                                    th:text="${#dates.format(blog.createTime, 'yyyy-MM-dd')}">2023-04-14</span></li>
                            <li>发布于：<span>上海</span></li>
                            <li>转载说明：请在文末添加二维码</li>
                        </ui>
                    </div>
                    <div class="five wide column">
                        <img th:src="@{/images/wechat.jpg}" src="../static/images/wechat.jpg" alt=""
                             class="ui right floated rounded orange bordered image" style="width: 100px">
                    </div>
                </div>
            </div>
            <!--中间内容留言区域开始-->
            <div class="ui bottom attached segment" th:if="${blog.reviewable}">
                <!--中间内容留言区域列表-->
                <div class="ui teal segment" id="comment-container">
                    <div th:fragment="commentList">
                        <div class="ui comments" style="max-width: 100%">
                            <h3 class="ui dividing header">评论区</h3>
                            <div th:if="${comments} == null or ${#arrays.length(comments)} == 0">
                                暂无评论...
                            </div>
                            <div class="comment" th:each="comment : ${comments}">
                                <a class="avatar">
                                    <img src="../static/images/user1.jpg" th:src="@{${comment.avatar}}">
                                </a>
                                <div class="content">
                                    <a class="author">
                                        <span th:text="${comment.nickname}">Matt</span>
                                        <div class="ui mini basic teal left pointing label" th:if="${comment.adminComment}">博主</div>
                                    </a>
                                    <div class="metadata">
                                        <span class="date"
                                              th:text="${#dates.format(comment.createTime, 'yyyy-MM-dd hh:mm')}">今天下午 5:42</span>
                                    </div>
                                    <div class="text" th:text="${comment.content}">太赞了！</div>
                                    <div class="actions">
                                        <a onclick="replay(this)" class="reply" data-commentid="1"
                                           data-commentnickname="Matt"
                                           th:attr="data-commentid=${comment.id},data-commentnickname=${comment.nickname}">回复</a>
                                    </div>
                                </div>
                                <!--回复内容-->
                                <div class="comments"
                                     th:if="${comment.replyComments} != null and ${#arrays.length(comment.replyComments)} > 0">
                                    <div class="comment" th:each="reply : ${comment.replyComments}">
                                        <a class="avatar">
                                            <img src="../static/images/user3.jpg" th:src="@{${reply.avatar}}">
                                        </a>
                                        <a class="author">

                                            </a>
                                        <div class="content">

                                            <a class="author" >
                                                <span th:text="${reply.nickname}">Matt</span>
                                                <div class="ui mini basic teal left pointing label" th:if="${reply.adminComment}">博主</div>
                                            </a>

                                            <a class="author m-teal" th:text="| @ ${reply.parentNickname}|">

                                            </a>
                                            <div class="metadata">
                                                <span class="date"
                                                      th:text="${#dates.format(reply.createTime, 'yyyy-MM-dd hh:mm')}">刚刚</span>
                                            </div>
                                            <div class="text" th:text="${reply.content}">你永远是多么正确</div>
                                            <div class="actions">
                                                <a onclick="replay(this)" class="reply"
                                                   th:attr="data-commentid=${reply.id},data-commentnickname=${reply.nickname}">回复</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--/*-->
                            <div class="comment">
                                <a class="avatar">
                                    <img src="../static/images/user2.jpg" th:src="@{/images/user2.jpg}">
                                </a>
                                <div class="content">
                                    <a class="author">Elliot Fu</a>
                                    <div class="metadata">
                                        <span class="date">昨天上午12:30</span>
                                    </div>
                                    <div class="text">
                                        <p>這對我的研究是非常有用.謝謝!</p>
                                    </div>
                                    <div class="actions">
                                        <a class="reply">回复</a>
                                    </div>
                                </div>
                                <div class="comments">
                                    <div class="comment">
                                        <a class="avatar">
                                            <img src="../static/images/user3.jpg" th:src="@{/images/user3.jpg}">
                                        </a>
                                        <div class="content">
                                            <a class="author">Jenny Hess</a>
                                            <div class="metadata">
                                                <span class="date">刚刚</span>
                                            </div>
                                            <div class="text">艾略特你永远是多么正确 :)</div>
                                            <div class="actions">
                                                <a class="reply">回复</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="comment">
                                <a class="avatar">
                                    <img src="../static/images/user4.jpg" th:src="@{/images/user4.jpg}">
                                </a>
                                <div class="content">
                                    <a class="author">Joe Henderson</a>
                                    <div class="metadata">
                                        <span class="date">5 天以前</span>
                                    </div>
                                    <div class="text">老兄，这太棒了。非常感谢。</div>
                                    <div class="actions">
                                        <a class="reply">回复</a>
                                    </div>
                                </div>
                            </div>
                            <!--*/-->

                        </div>
                    </div>

                </div>
                <!--                留言板开始-->
                <div class="ui form" id="comment-form">
                    <input type="hidden" name="blogId" th:value="${blog.id}">
                    <input type="hidden" name="parentCommentId" value="-1">
                    <div class="field">
                        <textarea name="content" placeholder="请输入评论信息 ... "></textarea>
                    </div>
                    <div class="fields">
                        <div class="field m-mobile-wide m-margin-bottom-small">
                            <div class="ui left icon input">
                                <i class="user icon"></i>
                                <input type="text" name="nickname" placeholder="姓名">
                            </div>
                        </div>
                        <div class="field m-mobile-wide m-margin-bottom-small">
                            <div class="ui left icon input">
                                <i class="mail icon"></i>
                                <input type="text" name="email" placeholder="邮箱">
                            </div>
                        </div>
                        <!--            表达验证错误提示-->
                        <div class="ui error message"></div>

                        <div class="field m-margin-bottom-small m-mobile-wide">
                            <button id="comment-btn" type="button" class="ui teal button m-mobile-wide"><i
                                    class="edit icon"></i>发布
                            </button>
                        </div>
                    </div>
                </div>
                <!--                留言板结束-->
            </div>
            <!--中间内容留言区域结束-->
        </div>
    </div>
</div>
<!--    工具栏-->
<div id="toolbar" class="m-fixed m-padded-all m-right-bottom animated bounceInRight" style="display: none">
    <div class="ui vertical icon buttons">
        <button type="button" class="ui toc teal button">目录</button>
        <a href="#comment-container" class="ui teal button">留言</a>
        <button type="button" class="ui icon button wechat"><i class="weixin icon"></i></button>
        <a href="#" id="toTop-button" class="ui icon button"><i class="chevron up icon"></i></a>
    </div>
</div>
<!--    生成的目录-->
<div class="ui toc-content flowing popup transition hidden" style="width: 250px !important;">
    <ol class="js-toc">

    </ol>
</div>

<!-- 弹出的文章二维码-->
<div id="qrcode" class="ui wechatQR flowing popup transition hidden" style="width: 130px !important;">
    <!--    <img src="../static/images/wechat.jpg" th:src="@{/images/wechat.png}" class="ui rounded image" style="width: 120px !important;"  alt="wechat.jpg"/>-->
</div>

<!--    页脚-->
<footer th:replace="_fregments :: footer" class="ui inverted segment  vertical m-padded-large">
    <div class="ui container center aligned">
        <div class="ui inverted stackable grid divided">
            <div class="three wide column">
                <div class="ui inverted link list">
                    <div class="item">
                        <img src="../static/images/wechat.jpg" class="ui rounded image" alt="亚里士多得"
                             style="width: 100px">
                    </div>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted">最新博客</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">博客1</a>
                    <a href="#" class="item">博客1</a>
                    <a href="#" class="item">博客1</a>
                    <a href="#" class="item">博客1</a>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted">联系我</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">QQ:3402747477</a>
                    <a href="#" class="item">邮箱:3402747477@qq.com</a>
                </div>
            </div>
            <div class="seven wide column">
                <h4 class="ui inverted">介绍</h4>
                <div class="ui inverted link list">
                    <p class="m-opacity-mini">
                        这是我的个人博客、会分享关于编程、写作、思考相关的任何内容，希望可以给来到这儿的人有所帮助
                    </p>
                </div>
            </div>
        </div>
        <!--    分隔符-->
        <div class="ui inverted section divider"></div>
        <div class="m-text-thin m-text-spaced m-opacity-mini">
            Copyright 2023-now ZBlog Designed by dylan
        </div>
    </div>

</footer>

<!--/*/<th:block th:replace="_fregments :: script">/*/-->
<script rel="script" src="../static/dist/jquery/jquery-3.4.1.min.js"
        th:src="@{/dist/jquery/jquery-3.4.1.min.js}"></script>
<script rel="script" src="../static/dist/semantic/semantic.js" th:src="@{/dist/semantic/semantic.js}"></script>
<script rel="script" src="../static/lib/prism/prism.js" th:src="@{/lib/prism/prism.js}"></script>
<script rel="script" src="../static/lib/tocbot/tocbot.js" th:src="@{/lib/tocbot/tocbot.js}"></script>
<script rel="script" src="../static/lib/qrcode/qrcode.js" th:src="@{/lib/qrcode/qrcode.js}"></script>

<script src="../static/lib/scrollTo/scrollTo.min.js" th:src="@{/lib/scrollTo/scrollTo.min.js}"></script>
<script src="../static/lib/waypoints/waypoints.js" th:src="@{/lib/waypoints/waypoints.js}"></script>
<!--/*/</th:block>/*/-->

<script th:inline="javascript">
    $('.m-menu.m-toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });
    //赞赏按钮
    $('#payBtn').popup({
        popup: $('.payQ.popup'),
        on: 'click',
        position: 'bottom center'
    });
    $('.toc.button').popup({
        popup: $('.toc-content.popup'),
        on: 'click',
        position: 'left center'
    });
    tocbot.init({
        // Where to render the table of contents.
        tocSelector: '.js-toc',
        // Where to grab the headings to build the table of contents.
        contentSelector: '.js-toc-content',
        // Which headings to grab inside of the contentSelector element.
        headingSelector: 'h1, h2, h3',
        // For headings inside relative or absolute positioned containers within content.
        hasInnerContainers: true,
    });

    $('.wechat').popup({
        popup: $('.wechatQR'),
        on: 'hover',
        position: 'left center'
    });
    var serverUrl = /*[[#{blog.server.url}]]*/'';
    var url = /*[[@{/blog/{id}(id=${blog.id})}]]*/'';
    var qrcode = new QRCode("qrcode", {
        text: serverUrl + url,
        width: 100,
        height: 100,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
    });


    $('#toTop-button').click(function () {
        $(window).scrollTo(0, 800);
    });

    var waypoint = new Waypoint({
        element: document.getElementById('way-point'),
        handler: function (direction) {
            // console.log(direction);
            if (direction == 'down') {
                $("#toolbar").show(100);
            } else {
                $("#toolbar").hide(500);
            }
        }
    });

    /*-- 表单验证 --*/
    $('.ui.form').form({
        fields: {
            content: {
                identifier: 'content',
                rules: [{
                    type: 'empty',
                    prompt: '内容：请输入评论内容'
                }]
            },
            nickname: {
                identifier: 'nickname',
                rules: [{
                    type: 'empty',
                    prompt: '姓名：请输入姓名'
                }]
            },
            email: {
                identifier: 'email',
                rules: [{
                    type: 'empty',
                    prompt: '邮箱：请输入邮箱'
                }]
            }
        }
    });
    $("#comment-btn").click(function () {
        var bool = $('.ui.form').form("validate form");
        if (bool) {
            postData();
        } else {

        }
    });

    function postData() {
        $("#comment-container").load(/*[[@{/comments}]]*/'', {
            "parentCommentId": $("[name='parentCommentId']").val(),
            "blogId": $("[name='blogId']").val(),
            "nickname": $("[name='nickname']").val(),
            "email": $("[name='email']").val(),
            "content": $("[name='content']").val()
        }, function (responseText, statusText, xhr) {
            clearContent();
            // $(window).scrollTo("#comment-container", 500);
        });
    }

    function clearContent() {
        $("[name='content']").val('').attr("placeholder", "请输入评论信息...");
        ;
        $("[name='parentCommentId']").val(-1);
    }

    //    回复
    function replay(obj) {
        var commentId = $(obj).data("commentid");
        var commentNickname = $(obj).data("commentnickname");
        //显示回复对象名称，聚焦输入框
        $("[name='content']").attr("placeholder", '@' + commentNickname).focus();
        //修改parentCommentId 为当前评论id
        $("[name='parentCommentId']").val(commentId);
        //滑动到输入框
        $(window).scrollTo("#comment-form", 500);
    }

    $(function () {
        //加载评论列表
        $("#comment-container").load(/*[[@{/comments/{id}(id=${blog.id})}]]*/'');
    })

</script>
</body>
</html>